<template>
  <el-dialog
    width="1200px"
    :title="$t('m.shelves.shelvestask')"
    :visible.sync="popupVisible"
    :before-close="close">
    <!-- tool start -->
    <el-form align="left" ref="form" :model="detail" label-width="120px" size="mini">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.shelves.shelvestaskcode')">
            <el-input disabled v-model="detail.shelvestaskcode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.shelves.shelvescode')">
            <el-input disabled v-model="detail.shelvescode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.state')">
            <el-select disabled v-model="detail.state">
              <el-option
                v-for="item in stateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.tasknumber')">
            <el-input disabled v-model="detail.ordernumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.shelves.shelvesdate')">
            <el-input disabled v-model="shelvesdate"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.shelves.shelvesuser')">
            <el-input disabled v-model="detail.shelvesuser"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table start -->
    <el-table
      ref="table"
      :data="tableData"
      stripe
      empty-text
      fit
      tooltip-effect="dark">
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="productspeccode" width="100px" label="SKU"></el-table-column>
      <el-table-column align="center" prop="suppliercode" label="supplierCode"></el-table-column>
      <el-table-column align="center" prop="productname" :label="$t('m.in.productname')" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="shelvesquantity" :label="$t('m.shelves.quantity')"></el-table-column>
      <el-table-column
        align="center"
        prop="shelveslocationcode"
        :label="$t('m.shelves.locationcode')"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="practicalquantity"
        :label="$t('m.shelves.practicalquantity')"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="practicallocationcode"
        :label="$t('m.shelves.practicallocationcode')"
      ></el-table-column>
    </el-table>
    <!-- table end -->
  </el-dialog>
</template>
<script>
import common from '@/utils/common'
export default {
  name:'shelvestask-detail-popup',
  props:['popupVisible', 'detail'],
  data(){
    return {
      tableData:[]
    }
  },
  computed:{
    stateOptions(){
      return [
        { value:1, label:this.$t('m.shelves.state1') },
        { value:2, label:this.$t('m.shelves.state5') },
        { value:3, label:this.$t('m.shelves.state3') }
      ]
    },
    shelvesdate(){
      return common.timestampToTime(this.detail.shelvesdate)
    }
  },
  watch:{
    detail(){
      this.tableData = this.detail.shelvestaskdetail
        ? JSON.parse(JSON.stringify(this.detail.shelvestaskdetail))
        : []
    }
  },
  methods:{
    close(){
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
</style>